/**
 * Creates the base structure of slider.
 * @member Ext.slider.Multi
 */
@mixin extjs-slider {
  .#{$prefix}slider {
    zoom: 1;
  }

  .#{$prefix}slider-inner {
    position: relative;
    left: 0;
    top: 0;
    overflow: visible;
    zoom: 1;
  }

  .#{$prefix}slider-focus {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    line-height: 1px;
    font-size: 1px;
    -moz-outline: 0 none;
    outline: 0 none;
    @include no-select;
    display: block;
    overflow: hidden;
  }

  /* Horizontal styles */
  .#{$prefix}slider-horz {
    padding-left: 7px;
    background: transparent no-repeat 0 -24px;
    width: 100%;
  }

  .#{$prefix}slider-horz .#{$prefix}slider-end {
    padding-right: 7px;
    zoom: 1;
    background: transparent no-repeat right -46px;
  }

  .#{$prefix}slider-horz .#{$prefix}slider-inner {
    background: transparent repeat-x 0 -2px;
    height: 18px;
  }

  .#{$prefix}slider-horz .#{$prefix}slider-thumb {
    width: $horizontal-slider-thumb-width;
    height: $horizontal-slider-thumb-height;
    margin-left: -($horizontal-slider-thumb-width / 2);
    position: absolute;
    left: 0;
    top: 1px;
    background: transparent no-repeat 0 0;
  }

  .#{$prefix}slider-horz .#{$prefix}slider-thumb-over {
    background-position: -14px -15px;
  }

  .#{$prefix}slider-horz .#{$prefix}slider-thumb-drag {
    background-position: -28px -30px;
  }

  /* Vertical styles */
  .#{$prefix}slider-vert {
    padding-top: 7px;
    background: transparent no-repeat -44px 0;
  }

  .#{$prefix}slider-vert .#{$prefix}slider-end {
    padding-bottom: 7px;
    zoom: 1;
    background: transparent no-repeat -22px bottom;
    width: 22px;
  }

  .#{$prefix}slider-vert .#{$prefix}slider-inner {
    background: transparent repeat-y 0 0;
    width: 22px;
  }

  .#{$prefix}slider-vert .#{$prefix}slider-thumb {
    width: $vertical-slider-thumb-width;
    height: $vertical-slider-thumb-height;
    margin-bottom: -($vertical-slider-thumb-height / 2);
    position: absolute;
    left: 3px;
    bottom: 0;
    background: transparent no-repeat 0 0;
  }

  .#{$prefix}slider-vert .#{$prefix}slider-thumb-over {
    background-position: -15px -14px;
  }

  .#{$prefix}slider-vert .#{$prefix}slider-thumb-drag {
    background-position: -30px -28px;
  }

  .#{$prefix}slider-horz,
  .#{$prefix}slider-horz .#{$prefix}slider-end,
  .#{$prefix}slider-horz .#{$prefix}slider-inner {
    background-image: theme-background-image($theme-name, 'slider/slider-bg.png');
  }

  .#{$prefix}slider-horz .#{$prefix}slider-thumb {
    background-image: theme-background-image($theme-name, 'slider/slider-thumb.png');
  }

  .#{$prefix}slider-vert,
  .#{$prefix}slider-vert .#{$prefix}slider-end,
  .#{$prefix}slider-vert .#{$prefix}slider-inner {
    background-image: theme-background-image($theme-name, 'slider/slider-v-bg.png');
  }

  .#{$prefix}slider-vert .#{$prefix}slider-thumb {
    background-image: theme-background-image($theme-name, 'slider/slider-v-thumb.png');
  }

  @if $include-ie {
    .#{$prefix}ie6 {
      .#{$prefix}slider-horz,
      .#{$prefix}slider-horz .#{$prefix}slider-end,
      .#{$prefix}slider-horz .#{$prefix}slider-inner {
        background-image: theme-background-image($theme-name, 'slider/slider-bg.gif');
      }

      .#{$prefix}slider-horz .#{$prefix}slider-thumb {
        background-image: theme-background-image($theme-name, 'slider/slider-thumb.gif');
      }

      .#{$prefix}slider-vert,
      .#{$prefix}slider-vert .#{$prefix}slider-end,
      .#{$prefix}slider-vert .#{$prefix}slider-inner {
        background-image: theme-background-image($theme-name, 'slider/slider-v-bg.gif');
      }

      .#{$prefix}slider-vert .#{$prefix}slider-thumb {
        background-image: theme-background-image($theme-name, 'slider/slider-v-thumb.gif');
      }
    }
  }
}